<template>
  <div class="tabbar">
      <!-- 底部标签栏 -->
      <div class="items">
          <div v-for="(item,index) in tabbarList" :key="index" @click="go(item)">
              <div class="items-item" :class="{active:itemPath == item.path}">
                 
                  <span style="font-size:0.3rem;">{{item.name}}</span>
              </div>
          </div>
          <div class="badge">{{length}}</div>
      </div>
  </div>
</template>

<script>
export default { 
    props:{
        tabbarList:{
            type:Array,
            required:true
        }
    },
    data(){
        return {
            itemPath:"/"
        }
    },
    computed:{
        length:function(){
         var n = 0;
        this.$store.state.cartStore.cartList.forEach(item=>{
         n+= item.num;
      })
      return n 
    }
    },
    methods:{
        go(item){
            this.itemPath = item.path
            this.$router.push(item.path),
             this.$loading();
        }
    }
}
</script>

<style scoped>
    .tabbar{
        width: 100%;
        height: 1.2rem;
        position: fixed;
        bottom: 0rem;
    }
    .items{
        width: 100%;
        height: 1.2rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .items-item{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .active{
        color: blue;
    }
    .badge{
        width: 0.3rem;
        height: 0.3rem;
        font-size:0.14rem;
        border-radius: 50%;
        text-align: center;
        line-height: 0.3rem;
        background-color: red;
        color: #fff;
        position: fixed;
        bottom: 0.8rem;
        right: 2.4rem;
    }
</style>